<template>
  <!--

   -->
  <el-table :data="tableData" border class="el-table" :row-style="rowStyle">
    <template v-for="item in configTable" :key="item.name">
      <el-table-column v-bind="item" align="center" v-if="item.label !== '操作'"> </el-table-column>
      <el-table-column v-bind="item" align="center" v-else>
        <template #default>
          <el-input-number v-model="item.progress" :min="0" :max="10" :precision="2" :step="0.1" />
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup>
import { computed } from 'vue'
const tableData = computed(() => [
  {
    phone: 111111,
    name: 'wyc',
    age: 18,
    progress: 0.3
  },
  {
    phone: 22222,
    name: 'gqx',
    age: 28,
    progress: 1
  },
  {
    phone: 1100011111,
    name: '小虎',
    age: 18,
    progress: 1.9
  }
])
const configTable = [
  {
    label: '手机号',
    prop: 'phone'
  },
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '年龄',
    prop: 'age'
  },
  {
    label: '操作',
    prop: ''
  }
]
const rowStyle = ({ row }) => {
  console.log(row)
  return { '--process': `${row.progress * 10}%` }
}
</script>

<style lang="less" scoped>
.el-table {
  position: relative;

  /deep/.el-table__row {
    position: relative;
    &::after {
      content: '';
      background-color: #409eff !important;
      position: absolute;
      height: 3px;
      left: 0;
      bottom: 0;
      width: var(--process);
    }
    // content: '';
    // transition: width 0.3 ease;

    // height: 3px;
    // position: absolute;
    // bottom: 0;
    // left: 0;
  }
}
</style>
